<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ShpConverter Test</title>
</head>
<body>
  <h2>ShapeFile 和 Geojson 相互转换</h2>
  <p>
    导出类型：
    <form action="" id="exportType">
      <input type="radio" name="type" value="shapefile" checked class="radio">shapefile
      <input type="radio" name="type" value="geojson" class="radio">geojson
    </form>
    <button id="upload" onclick="uploadTest()">上传文件转换</button>
    <button id="json" onclick="jsonTest(testJson)">JSON对象转换</button>
  </p>
  <script src="index.js"></script>
  <script type="text/javascript">
    const shpConverter = shpconverter.default
    shpConverter.Utils.utilTest('hello util')
    function getExportType() {
      let exportType = ''
      const radioObjs = document.querySelectorAll('.radio')
      for (let i = 0; i < radioObjs.length; i += 1) {
        if (radioObjs[i].checked === true) {
          exportType = radioObjs[i].value
        }
      }
      return exportType
    }
    function uploadTest() {
      const form = document.createElement('form')
      form.style.position = 'absolute'
      form.style.top = '-1000px'
      const input = document.createElement('input')
      input.setAttribute('type', 'file')
      input.setAttribute('multiple', 'multiple')
      input.onchange = onchange
      form.appendChild(input)
      document.body.appendChild(form)
      input.click()
      const exportType = getExportType()
      function onchange(e) {
        const files = e.target.files
        if (files) {
          doExport(files, exportType)
        }
      }
    }
    function jsonTest(jsonObj) {
      const exportType = getExportType()
      doExport(jsonObj, exportType)
    }
    function doExport(files, exportType) {
      if (exportType === 'geojson') {
        shpConverter.Converter.exportGeojson(files,{exportFilename:'customFilename'})
          .then((result) => {
            // 转JSON提取geometry
            const fr = new FileReader()
            fr.onload = function() {
              const resultJSON = JSON.parse(this.result)
              console.log(resultJSON.features)
            }
            fr.readAsText(result.content, 'UTF-8')
            saveBlobToDownloadFolder(result.filename, result.content)
          })
          .catch((e) => {
            alert(e)
          })
      } else if (exportType === 'shapefile') {
        shpConverter.Converter.exportShp(files)
          .then((result) => {
            saveBlobToDownloadFolder(result.filename, result.content)
          })
          .catch((e) => {
            alert(e)
          })
      }
    }
    function saveBlobToDownloadFolder(filename, blob) {
      let blobUrl = null
      try {
        blobUrl = URL.createObjectURL(blob)
      } catch (e) {
        alert('导出失败')
      }
      const anchor = document.createElement('a')
      anchor.setAttribute('href', blobUrl)
      anchor.setAttribute('download', filename)
      anchor.click()
      setTimeout(function() {
        URL.revokeObjectURL(blobUrl)
      }, 500)
    }
  </script>
  <script>
    const testJson = {
                    "type":"Polygon",
                    "coordinates":[
                        [
                            [
                                13.36617949899573,
                                52.44599246921813
                            ],
                            [
                                13.37016856575521,
                                52.45561311318493
                            ],
                            [
                                13.3710841029947,
                                52.47204398569269
                            ],
                            [
                                13.36625065134183,
                                52.47605496638253
                            ],
                            [
                                13.37156897311252,
                                52.4849503585077
                            ],
                            [
                                13.40676529936286,
                                52.48521512916732
                            ],
                            [
                                13.41348819666088,
                                52.47870822519066
                            ],
                            [
                                13.42119645074374,
                                52.45675178838859
                            ],
                            [
                                13.41768244494836,
                                52.45220130199412
                            ],
                            [
                                13.37829451775066,
                                52.4520861546161
                            ],
                            [
                                13.36617949899573,
                                52.44599246921813
                            ]
                        ]
                    ]
                }
  </script>
</body>
</html>